import React, { Component } from 'react'
import '../shop.css';
import { Swipe } from 'react-vant';
import { SearchOutlined } from '@ant-design/icons';
import yao1 from '../image/皮肤用药.png'
import yao2 from '../image/妇科用药.png'
import yao3 from '../image/肠胃消化.png'
import yao4 from '../image/呼吸用药.png'
import yao5 from '../image/营养补充.png'
import yao6 from '../image/家庭常备.png'
import yao7 from '../image/耳鼻咽喉.png'
import yao8 from '../image/男科用药.png'
import yao9 from '../image/骨科疼痛.png'
import yao10 from '../image/心脑血管.png'
import dingdan from '../image/订单.png'
import shopyao from "../image/快速购药2.png"
import antd from '../image/轮播4.png'
import antd1 from '../image/轮播3.PNG'
import antd2 from '../image/轮播6.PNG'
import antd3 from '../image/轮播.PNG'
import doctor from '../image/医我看.png'
import beautil from '../image/美肌波特.JPG'
import axios from 'axios'

export default class Shop extends Component {
    state = {
        Shopyaolist: [
            {
                path: "",
                name: "皮肤用药",
                img: yao1,
            },
            {
                path: "",
                name: "妇科用药",
                img: yao2,
            },
            {
                path: "",
                name: "肠胃消化",
                img: yao3,
            },
            {
                path: "",
                name: "呼吸用药",
                img: yao4,
            },
            {
                path: "",
                name: "营养补充",
                img: yao5,
            },
            {
                path: "",
                name: "家庭常备",
                img: yao6,
            },
            {
                path: "",
                name: "耳鼻咽喉",
                img: yao7,
            },
            {
                path: "",
                name: "男科用药",
                img: yao8,
            },
            {
                path: "",
                name: "骨科疼痛",
                img: yao9,
            },
            {
                path: "",
                name: "心脑血管",
                img: yao10,
            }
        ],
        shop: ''
    }
    componentDidMount() {
        axios({
            url: '/api/shop',
            method: 'post'
        }).then(res => {
            console.log(res);
            this.setState({
                shop: res.data.data
            })
        })
    }
    //搜索  OK
    
    // onSearch = (value) => {
    //     console.log(value);
    //     axios({
    //         url: '/api/archshop',
    //         method: 'post',
    //         data: { value: value }
    //     }).then(res => {
    //         console.log(res);
    //         this.setState({
    //             shopcar: res.data.data
    //         })
    //     })
    // }
    //跳转详情
    toDetail = (item) => {
        this.props.history.push({ pathname: `/detail/${item.id}`, state: { data: item }})  
    }

    goorder = () => {
        this.props.history.push('/order')
    }
    render() {
        const { Shopyaolist, shop } = this.state;
        // const { Shopyaolist, shopcar } = this.state;
        return (
            <div className="shop">
                <div className="header">
                    商城
                </div>
                <div className="main">
                    <div className="searchf">
                        <div className="search">
                            <SearchOutlined />
                            <input placeholder="请输入你要搜索内容" type="text" onChange={(e) => this.onSearch(e.target.value)}></input>
                        </div>
                        <img src={dingdan} alt='' onClick={this.goorder}/>
                    </div>

                    <div className='Shopbody'>
                        <div className='shopyao' onClick={this.goShop}>
                            <img src={shopyao} alt='' />
                        </div>
                        <div className='ShopDrugtype'>
                            {
                                Shopyaolist ? Shopyaolist.map((item, index) => {
                                    return <div className='Shopitem' key={index}>
                                        <img src={item.img} alt='' />
                                        <span>{item.name}</span>
                                    </div>
                                }) : null
                            }
                        </div>
                        <div className='ShopSwiper'>
                            <Swipe
                                autoplay={3000}
                                pagination={{
                                    renderBullet: (index, className) => {
                                        return `<span class="custom-pagination--bullet ${className}"></span>`;
                                    },
                                }}
                            >
                                <Swipe.Item>
                                    <img src={antd} alt='' />
                                </Swipe.Item>
                                <Swipe.Item>
                                    <img src={antd1} alt='' />
                                </Swipe.Item>
                                <Swipe.Item>
                                    <img src={antd2} alt='' />
                                </Swipe.Item>
                                <Swipe.Item>
                                    <img src={antd3} alt='' />
                                </Swipe.Item>
                            </Swipe>

                        </div>

                    </div>
                    <div className="contexts">
                        <div className="pic">
                            <img src={doctor} alt='' />
                        </div>
                        <div className="title">

                            <img src={beautil} alt='' />
                        </div>
                        <div className="new">
                            <p>美洽心选</p>
                        </div>
                        <div className="concard">
                            {
                                shop.length && shop.map((item, ind) => {
                                    return <dl key={ind} onClick={() => this.toDetail(item)}>
                                        <dt>
                                            <img src={item.img} alt="" />
                                        </dt>
                                        <dd>
                                            <span>{item.title}</span>
                                            {/* <span className="desc">{item.desc}</span> */}
                                            <span></span>
                                            <span>￥{item.price}</span>
                                        </dd>
                                    </dl>
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
